<template>
  <div class="publicpageview">
    <div :class="!isSearch ? 'publicformview-new' : 'publicformview-new-gaoji'">
      <el-form :inline="true" :model="listQuery" size="mini" ref="searchForm" label-width="140px" style="flex:1;">
        <div :class="!isSearch ? 'publicformview-new-left' : 'publicformview-new-left-gaoji'">
          <el-form-item label="区房屋管理单位：" prop="dname">
            <el-select :disabled='isluru' clearable v-model="listQuery.dname" @change='areaChange'>
              <div v-for="(item,index) in areaList" :key="index">
                <el-option :label="item.dname" :value="item.did" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="管理部(分中心)：" prop="manageDepartment">
            <el-select :disabled='isluru' clearable v-model="listQuery.manageDepartment" @change='HouseChange'>
              <div v-for="(item,index) in HouseList" :key="index">

                <el-option :label="item.aname" :value="item.aid" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="管理形式：" prop="manageway">
            <el-select clearable v-model="listQuery.manageway">
              <el-option label="正常" value="正常" key="1"></el-option>
              <el-option label="新纳入" value="新纳入" key="2"></el-option>
              <el-option label="托管房屋" value="托管房屋" key="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产别：" prop="OwnWay">
            <el-select clearable v-model="listQuery.OwnWay">
              <el-option label="公产" value="公产" key="1"></el-option>
              <el-option label="代管产" value="代管产" key="2"></el-option>
              <el-option label="经管产" value="经管产" key="3"></el-option>
              <el-option label="托管产" value="托管产" key="4"></el-option>
              <el-option label="教会产" value="教会产" key="5"></el-option>
              <el-option label="国有自管产" value="国有自管产" key="6"></el-option>
              <el-option label="股份企业产" value="股份企业产" key="7"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性质：" prop="LivingWay">
            <el-select clearable v-model="listQuery.LivingWay">
              <el-option label="住宅" value="住宅" key="1"></el-option>
              <el-option label="非住宅" value="非住宅" key="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="管片：" prop="groupNew">
            <el-select clearable v-model="listQuery.groupNew">
              <div v-for="(item,index) in guanpianList" :key="index">
                <el-option :label="item.groupnew" :value="item.groupnew" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="所号：" prop="blockNo">
            <el-input v-model="listQuery.blockNo"></el-input>
          </el-form-item>
          <el-form-item label="终止项：" prop="endPro">
            <el-select clearable v-model="listQuery.endPro">
              <el-option label="未终止" value="1" key="1"></el-option>
              <el-option label="已终止" value="2" key="2"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-col :span="5">
							<el-form-item label="是否附属：" prop="integer">
								<el-select v-model="listQuery.integer">
									<el-option label="主体" value="0" key="0"></el-option>
									<el-option label="附属" value="1" key="1"></el-option>
								</el-select>
							</el-form-item>
						</el-col> -->
          <el-form-item label="用途：" prop="use">
            <el-input v-model="listQuery.use"></el-input>
          </el-form-item>
          <el-form-item label="地址：" prop="RAddressoomID">
            <el-input v-model="listQuery.RAddressoomID"></el-input>
          </el-form-item>
          <el-form-item label="门号：" prop="BuildingDoorNo">
            <el-input v-model="listQuery.BuildingDoorNo"></el-input>
          </el-form-item>
          <el-form-item label="楼层：" prop="FloorNo">
            <el-input v-model="listQuery.FloorNo"></el-input>
          </el-form-item>
          <el-form-item label="变动日期：" prop="ChangeDate">
            <el-date-picker style="width: 130px;" v-model="listQuery.ChangeDate" type="datetime" placeholder="年/月/日">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="变动原因：" prop="ChangeCause">
            <el-select clearable v-model="listQuery.ChangeCause">
              <el-option label="拆除待注销(未交补偿费)" value="拆除待注销(未交补偿费)" key="1"></el-option>
              <el-option label="拆除待注销(市政基础设施要件不齐)" value="拆除待注销(市政基础设施要件不齐)" key="2"></el-option>
              <el-option label="拆除待注销(其他)" value="拆除待注销(其他)" key="3"></el-option>
              <el-option label="拆迁冻结" value="拆迁冻结" key="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="启始日期：" prop="StartDate">
            <el-date-picker style="width: 130px;" v-model="listQuery.StartDate" type="datetime" placeholder="年/月/日">
            </el-date-picker>
          </el-form-item>
          <!-- 	<el-col :span="5">
						<el-form-item label="不包括拆除待注销：" prop="keyword">
							<el-switch v-model="value1">
							</el-switch>
						</el-form-item>
					</el-col> -->
        </div>

      </el-form>
      <div :class="!isSearch ? 'publicformview-new-right' : 'publicformview-new-right-gaoji'">
        <div>
          <el-button size="mini" type="primary" @click="sumbitCx">查询</el-button>
          <el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
          <el-button size="mini" type="primary" @click="isSearch = !isSearch">{{!isSearch?'高级搜索':'关闭搜索'}}</el-button>
        </div>
      </div>
    </div>

    <div class="publitableview">
      <el-button type="primary" size="mini" @click="handleUpdate">导出</el-button>
      <el-table max-height='500px' v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">

        <el-table-column align="center" label="所号" prop="blockno">
        </el-table-column>

        <el-table-column align="center" label="门号" prop="buildingdoorno">
        </el-table-column>

        <el-table-column align="center" label="楼层" prop="floorno">
        </el-table-column>

        <el-table-column align="center" label="间号" prop="roomno">
        </el-table-column>

        <el-table-column align="center" label="起始日期" prop="startdate">
          <template slot-scope="scope">
            {{scope.row.startdate?scope.row.startdate.split(' ')[0]:''}}
          </template>
        </el-table-column>

        <el-table-column align="center" label="终止日期" prop="stopdate">
          <template slot-scope="scope">
            {{scope.row.stopdate?scope.row.stopdate.split(' ')[0]:''}}
          </template>
        </el-table-column>

        <el-table-column align="center" label="终止原因" prop="stopcause">
        </el-table-column>

        <el-table-column align="center" label="使用性质" prop="livingway">
        </el-table-column>
        <el-table-column align="center" label="用途" prop="use">
        </el-table-column>
        <el-table-column align="center" label="长*宽(米)" prop="lenthWidth">
        </el-table-column>
        <el-table-column align="center" label="使用面积" prop="usingarea">
        </el-table-column>
        <el-table-column align="center" label="建筑面积" prop="buildingarea">
        </el-table-column>
        <el-table-column align="center" label="计租面积" prop="rentarea">
        </el-table-column>
        <el-table-column align="center" label="原值" prop="oldvalue">
        </el-table-column>
        <el-table-column align="center" label="现值" prop="nowvalue">
        </el-table-column>
        <el-table-column align="center" label="单位分数" prop="unitscore">
        </el-table-column>
        <el-table-column align="center" label="分值" prop="unitvalue">
        </el-table-column>
        <el-table-column align="center" label="单位租金" prop="unitrentprice">
        </el-table-column>
        <el-table-column align="center" label="租金定额" prop="rentprice">
        </el-table-column>
        <el-table-column align="center" label="建档" prop="creatingdept">
        </el-table-column>
        <el-table-column align="center" label="是否计租" prop="rentflag">
        </el-table-column>
        <el-table-column align="center" label="结构" prop="structure">
        </el-table-column>
        <el-table-column align="center" label="地级" prop="addresslevel">
        </el-table-column>
        <el-table-column align="center" label="租金类别" prop="rentway">
        </el-table-column>

        <el-table-column align="center" label="操作" width="140" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleDayin(scope.row.roomid,3)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="publicpaginationview">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
      </div>
    </div>

    <el-dialog title="详情" :visible.sync="isXiangqing" width="70%" :before-close="handleClose" style="margin-top: 100px;">
      <el-table max-height='500px' v-loading="listLoading" :data="detailQuery" border fit highlight-current-row size="mini">

        <el-table-column align="center" label="所号" prop="blockno">
        </el-table-column>

        <el-table-column align="center" label="门号" prop="buildingdoorno">
        </el-table-column>

        <el-table-column align="center" label="楼层" prop="floorno">
        </el-table-column>

        <el-table-column align="center" label="间号" prop="roomno">
        </el-table-column>

        <el-table-column align="center" label="起始日期" prop="startdate">
          <template slot-scope="scope">
            {{scope.row.startdate?scope.row.startdate.split(' ')[0]:''}}
          </template>
        </el-table-column>

        <el-table-column align="center" label="终止日期" prop="stopdate">
          <template slot-scope="scope">
            {{scope.row.stopdate?scope.row.stopdate.split(' ')[0]:''}}
          </template>
        </el-table-column>

        <el-table-column align="center" label="终止原因" prop="stopcause">
        </el-table-column>

        <el-table-column align="center" label="使用性质" prop="livingway">
        </el-table-column>
      </el-table>
      <div style="height: 40px;"></div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import * as XLSX from 'xlsx'
import {
  blockList,
  getArea,
  getHouseAdmin,
  blockGroupList,
  dataRoomPage
} from '@/api/industry'
export default {
  name: 'AccommodationManagementGonglingguanli',

  data() {
    return {
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        areaUnit: '',
        aid: '',
        manageway: '',
        OwnWay: '',
        LivingWay: '',
        groupNew: '',
        blockNo: '',
        endPro: '',
        use: '',
        RAddressoomID: '',
        BuildingDoorNo: '',
        FloorNo: '',
        ChangeDate: '',
        ChangeCause: '',
        StartDate: '',
				
					dname:''
      },
      total: 0,
      options: [
        {
          key: '1'
        }
      ],
      list: [],
      listLoading: false,
      type: '',
      value1: '',
      // 区房屋管理单位
      areaList: [],
      // 根据区获取部门
      HouseList: [],
      // 管片列表
      guanpianList: [],
      suoList: [],
      isSearch: false,
      detailQuery: [],
      isXiangqing: false,
				isluru:false
    }
  },

  computed: {},

  mounted() {
		if(localStorage.getItem('userHouseAdminId')>0){
			this.listQuery.areaUnit = localStorage.getItem('userDID')
			this.listQuery.dname = localStorage.getItem('userDname')
			this.listQuery.manageDepartment = localStorage.getItem('userHouseAdminName')
				this.listQuery.aid = localStorage.getItem('userHouseAdminId')
			this.isluru = true
		}
    this.getArea()
    this.blockGroupList()
    this.dataRoomPage()
  },

  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // 选择区房屋管理
    areaChange(e) {
      if (e) {
        this.listQuery.areaUnit = e
        this.getHouseAdmin(e)
      }
      this.listQuery.aid = ''
    },
    // 根据区获取部门
    HouseChange(e) {
      console.log(e)
      this.listQuery.aid = e
    },
    // 管片列表
    blockGroupList() {
      let data = {
        group: '',
        groupNumber: '',
        houseAdmin: '',
        pageNum: '',
        pageSize: 99999
      }
      this.listLoading = true
      blockGroupList(data).then((res) => {
        this.guanpianList = res.data.list
        this.listLoading = false
      })
    },
    getArea() {
      getArea().then((res) => {
        console.log(res)
        this.areaList = res.data
      })
    },
    getHouseAdmin(e) {
      getHouseAdmin({ DID: e }).then((res) => {
        this.HouseList = res.data
      })
    },
    // 查询
    sumbitCx() {
      this.dataRoomPage()
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = val
      this.dataRoomPage()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.dataRoomPage()
    },
    dataRoomPage() {
      let data = {
        DID: this.listQuery.areaUnit ? this.listQuery.areaUnit : -1,
        pageNum: this.listQuery.pageNum,
        pageSize: this.listQuery.pageSize,
        areaUnit: this.listQuery.areaUnit,
        AID: this.listQuery.aid ? this.listQuery.aid : -1,
        manageway: this.listQuery.manageway,
        OwnWay: this.listQuery.OwnWay,
        LivingWay: this.listQuery.LivingWay,
        groupNew: this.listQuery.groupNew,
        blockNo: this.listQuery.blockNo,
        endPro: this.listQuery.endPro,
        use: this.listQuery.use,
        RAddressoomID: this.listQuery.RAddressoomID,
        BuildingDoorNo: this.listQuery.BuildingDoorNo,
        FloorNo: this.listQuery.FloorNo,
        ChangeDate: this.listQuery.ChangeDate
          ? dayjs(this.listQuery.ChangeDate).format('YYYY-MM-DD HH:mm:ss')
          : '',
        ChangeCause: this.listQuery.ChangeCause,
        StartDate: this.listQuery.StartDate
          ? dayjs(this.listQuery.StartDate).format('YYYY-MM-DD HH:mm:ss')
          : ''
      }
      this.listLoading = true
      dataRoomPage(data).then((res) => {
        console.log(res)
        this.list = res.data.list
        this.total = res.data.total
        this.listLoading = false
      })
    },
    resetForm(val) {
      console.log('1')
      this.$refs[val].resetFields()
			if(this.isluru == true){
				this.listQuery.areaUnit = localStorage.getItem('userDID')
				this.listQuery.dname = localStorage.getItem('userDname')
				this.listQuery.manageDepartment = localStorage.getItem('userHouseAdminName')
					this.listQuery.aid = localStorage.getItem('userHouseAdminId')
				
			}
    },

    handleAddUser() {
      this.$router.push('chanquanziliaoluru')
    },
    handleUpdate(currentData, type) {
      this.$confirm('此操作将导出该条内容，请确认是否继续操作？', '导出提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let data = {
            DID: this.listQuery.areaUnit ? this.listQuery.areaUnit : -1,
            pageNum: this.listQuery.pageNum,
            pageSize: this.listQuery.pageSize,
            areaUnit: this.listQuery.areaUnit,
            AID: this.listQuery.aid ? this.listQuery.aid : -1,
            manageway: this.listQuery.manageway,
            OwnWay: this.listQuery.OwnWay,
            LivingWay: this.listQuery.LivingWay,
            groupNew: this.listQuery.groupNew,
            blockNo: this.listQuery.blockNo,
            endPro: this.listQuery.endPro,
            use: this.listQuery.use,
            RAddressoomID: this.listQuery.RAddressoomID,
            BuildingDoorNo: this.listQuery.BuildingDoorNo,
            FloorNo: this.listQuery.FloorNo,
            ChangeDate: this.listQuery.ChangeDate
              ? dayjs(this.listQuery.ChangeDate).format('YYYY-MM-DD HH:mm:ss')
              : '',
            ChangeCause: this.listQuery.ChangeCause,
            StartDate: this.listQuery.StartDate
              ? dayjs(this.listQuery.StartDate).format('YYYY-MM-DD HH:mm:ss')
              : ''
          }
          dataRoomPage(data).then((res) => {
            let list = res.data.list
            let outList = []
            res.data.list.forEach((item, index) => {
              outList.push({
                所号: item.blockno,
                门号: item.buildingdoorno,
                楼层: item.floorno,
                间号: item.roomno,
                起始日期: item.startdate,
                终止日期: item.stopdate,
                终止原因: item.stopcause,
                使用性质: item.livingway
              })
            })
            // 获取表格数据
            const data = outList
            // 转换数据为工作表
            const worksheet = XLSX.utils.json_to_sheet(data)
            // 创建新的工作簿
            const workbook = XLSX.utils.book_new()
            // 将工作表添加到工作簿
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
            // 导出Excel文件
            XLSX.writeFile(workbook, '房间信息.xlsx')
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消导出'
          })
        })
    },
    handleDayin(id, type) {
      this.$router.push({
        path: 'fangjianxinxiluru',
        query: {
          roomid: id,
          type: type
        }
      })
    }
  }
}
</script>
<style scoped>
.saveContent {
  width: 100%;
  display: flex;
  justify-content: end;
  margin-top: 20px;
  padding-bottom: 20px;
}

.title {
  color: #008c93;
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

.cfguanpian {
  padding-bottom: 20px;
  color: #008c93;
  margin-bottom: 20px;
  font-weight: bold;
}

.title2 {
  color: #008c93;
  margin-bottom: 20px;
  font-weight: bold;
}

.tianjiaButton {
  border: 2px solid #008c93;
  background-color: #fff;
  color: #008c93;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 150px;
}
/deep/.el-input__inner {
  width: 130px;
}
/deep/.publicpaginationview .el-input__inner {
  width: 100px;
}
/deep/.publicpaginationview .is-in-pagination .el-input__inner {
  width: 50px;
}
</style>